<script setup lang="ts">
import { ref, computed, watch, reactive } from 'vue';
interface CartItem {
  id: number
  isAgree: boolean
  icon: string
  price: number
  count: number
}
const defaultFruitList = ref<CartItem[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isAgree: true,
    count: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isAgree: false,
    count: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isAgree: false,
    count: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isAgree: false,
    count: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isAgree: false,
    count: 20,
    price: 34,
  },
])
//  所有数据
const cartData = localStorage.getItem('list') == null ? defaultFruitList : ref<CartItem[]>(JSON.parse(localStorage.getItem('list') as string))
// const cartData = ref<CartItem[]>([
//   {
//     id: 1,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
//     isAgree: true,
//     count: 2,
//     price: 6,
//   },
//   {
//     id: 2,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
//     isAgree: false,
//     count: 7,
//     price: 20,
//   },
//   {
//     id: 3,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
//     isAgree: false,
//     count: 3,
//     price: 40,
//   },
//   {
//     id: 4,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
//     isAgree: false,
//     count: 10,
//     price: 3,
//   },
//   {
//     id: 5,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
//     isAgree: false,
//     count: 20,
//     price: 34,
//   },
// ])
watch(
  () => cartData,
  (newCartData) => {
    localStorage.setItem('list', JSON.stringify(newCartData.value))
  }, {
  deep: true,
}
)
const totalTest = ref(0)
watch(
  () => cartData.value,
  (newCartData) => {
    totalTest.value = newCartData.reduce((acc, item: CartItem) => {
      if (item.isAgree) {
        return acc + 1
      }
      return acc
    }, 0)
  }, {
  deep: true,
  immediate: true
}
)
//  选中总数
const totalCount = computed(() => {
  return cartData.value.reduce((sum, item) => {
    if (item.isAgree) {
      return sum + item.count
    } else {
      return sum
    }
  }, 0)
})
//  总价格
const totalPrice = computed(() => {
  return cartData.value.reduce((sum, item) => {
    if (item.isAgree) {
      return sum + item.count * item.price
    } else {
      return sum
    }
  }, 0)
})

const add = (item: CartItem) => {
  item.count++
}
const reduction = (item: CartItem) => {
  item.count > 0 && item.count--
}
//   删除
const remove = (item: CartItem) => {
  cartData.value = cartData.value.filter((i: CartItem) => {
    return i.id !== item.id
  })
}

const isAgreeAll = computed({
  get() {
    return cartData.value.every((item: CartItem) => {
      return item.isAgree == true
    })
  },
  set(newSelect) {
    cartData.value.forEach((item: CartItem) => {
      item.isAgree = newSelect
    })
  }
})

</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr active" v-for="item in cartData" :key="item.id">
            <div class="td"><input type="checkbox" v-model="item.isAgree" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="reduction(item)"> - </button>
                <span class="my-input__inner">{{ item.count }}</span>
                <button class="increase" @click="add(item)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.price * item.count }}</div>
            <div class="td"><button @click="remove(item)">删除</button></div>
          </div>

          <!-- <div class="tr">
            <div class="td"><input type="checkbox" /></div>
            <div class="td"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png" alt="" /></div>
            <div class="td">7</div>
            <div class="td">
              <div class="my-input-number">
                <button disabled class="decrease"> - </button>
                <span class="my-input__inner">1</span>
                <button class="increase"> + </button>
              </div>
            </div>
            <div class="td">14</div>
            <div class="td"><button>删除</button></div>
          </div> -->
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isAgreeAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <!-- 按商品数量 -->
          <button class="pay">结算( {{ totalCount }} )</button>
          <!-- 按选中个数 -->
          <!-- <button class="pay">结算( {{ totalTest }} )</button> -->

        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>